<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
	<script src="lib/prop-types.js"></script>
</head>
<body>
<div id="root">

</div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	function App(){
		return (
			<>
				<h3>App</h3>
				<Child  age={10}></Child>
			</>
		)
	}
	function Child(props){
		let {username,age,sex} = props;
		return (
			<>
				<h3>我还是一个孩子Child</h3>
				<p>username:{props.username}|{username}</p>
				<p>age:{props.age}|{age}</p>
				<p>sex:{props.sex}|{sex}</p>
			</>
		)
	}
	// 增加静态属性propTypes
	Child.propTypes = {
		// 限制接必的属性username的值必须是一个字符串，可以省略
		username:PropTypes.string,
		// 不允许省略且类型是一个数字
		age:PropTypes.number.isRequired
	};
	// egret
	Child.defaultProps = {
		// 增加默认值
		sex:"女"
	}
	root.render(<App/>)

</script>
</html>